<!--
    @ author:小恶魔
    @ datetime: 2020-7-26
 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的查单</title>

    <link rel="stylesheet" href="/static/logistics/css/bootstrap4.5.css">
    <link rel="stylesheet" href="/static/admin/lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="/static/logistics/css/toast.css">
</head>
<body>
<!-- 头部文件 -->
<div th:replace="~{/logistics/header::html}"></div>
<div class="bg-light" id="mycheckOrderApp">
    <div class="container">
        <div class="row">
            <!-- 面包屑导航 -->
            <div th:replace="~{/logistics/navigation::html}"></div>

            <div class="col-sm-12 p-3 rounded" style="background-color: white;">

                <div class="row p-4" style="margin-bottom: 30%;">
                    <div class="col-sm-8">
                        <div class="input-group mb-3">
                            <input type="text" v-model="orderNo" class="form-control" placeholder="请输入运单点击查询" aria-label="Recipient's username" aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <span class="input-group-text" id="basic-addon2" @click="resetOrderNo"><i class="fa fa-trash"></i></span>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-4">
                        <button type="button" class="btn btn-warning" @click="queryOrderTail">查询</button>
                    </div>
                    <div class="col-sm-12">
                        <span class="text-secondary">最新查找：</span>
                        <button type="button" class="btn btn-outline-secondary btn-sm" v-for="(noList,index) in orderNos">
                            {{noList}}
                            <i class="fa fa-remove ml-1" @click="removeOrderNos(index)"></i>
                        </button>
                    </div>

                    <div class="col-sm-12 mt-3">
                        <hr>
                        <div class="accordion" id="accordionExample" v-if="orderTailList.length != 0">

                            <div class="card border-0">
                                <div class="card-header" id="headingOne" style="background-color:rgba(255,255,255,0.5);">
                                    <h2 class="mb-0">
                                        <button class="btn btn-link btn-block text-left w-75 text-warning" style="display: inline;" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            运单号: {{resultOrderNo}}
                                        </button>
                                        <i class="fa fa-angle-right pull-right"></i>
                                    </h2>
                                </div>

                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                                    <div class="card-body">

                                        <ul class="list-group">
                                            <li class="list-group-item border-0" style="font-size: 14px;" v-for="(orderTail,index) in orderTailList">
                                                <p class="font-weight-light"><i class="fa fa-circle-o"></i>{{orderTail.orderTailIncident}}</p>
                                                <i class="mr-2"></i><span class="font-weight-light">{{orderTail.orderTailTime}}</span>
                                            </li>
                                        </ul>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-if="orderTailList.length == 0">

                        </div>

                    </div>
                </div>




            </div>
        </div>
    </div>
</div>


<div th:replace="~{/logistics/footer::html}"></div>
<script src="/static/logistics/js/jquery-2.2.4.js"></script>
<script src="/static/logistics/gijgo-combined-1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<script src="/static/logistics/js/vue.js"></script>
<script src="/static/logistics/js/axios.min.js"></script>
<script src="/static/logistics/js/bootstrap4.5.js"></script>
<script src="/static/logistics/home/js/myCheckOrder.js"></script>
<script src="/static/logistics/js/toast.js"></script>
</body>
</html>
